<template>
	<!-- 大容器包裹页面 -->
	<div id="activity_box">
		<!-- 头部 -->
		<div class="activity_header">
			<ul class="activity_header_nav">
				<li><a href="/">首页</a></li>
				<li>&gt</li>
				<li>活动</li>
				<li id="header_button"><a href="#"><img src="static/imgs/header_button.jpg" alt=""></a></li>
			</ul>
		</div>
		<!-- main -->
		<div id="activity_main" >
			<!-- 具体活动 -->
			<div class="activity_project" v-for="dataArr in activityData" >
				<div class="activity_project_banner">
					<a href="#">
						<img class="activity_project_banner_img" :src="dataArr.image" alt="">
					</a>
				</div>
				<div class="activity_project_title">
					<p class="activity_project_time">{{getDate(dataArr.create_time)}}</p>
					<p class="activity_project_people">{{dataArr.user_count}}人参与</p>
				</div>
				<p></p>
			</div>
			<div class="huodong_loadmore" @click="loadMore('getActivityData')">
				<span>加载更多</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data (){
			return {
				num : 0,
				lists : []
			}
		},
		computed:{
			activityData(){
				return this.$store.state.activitydata;
			}
		},
		mounted(){
			this.$store.commit("getActivityData");
//			console.log(this.$store.state.activitydata)

		},
		methods : {
			// 将时间戳转化为日期格式
			getDate(tm){
				var tt=new Date(parseInt(tm) * 1000).toLocaleString();
//				    tt=tt.substring(9,tt.Length-1);
				    tt=tt.substring(0,9);
//				    .replace(/年|月/g, "-").replace(/日/g, " ");
				// console.log(tt);
				return tt;
			},
			loadMore(mn){
                	this.$store.commit(mn);
			}
		},
		created (){
			let that = this
			axios.get('static/activity.json')
			  .then(function(response){
				that.lists = response.data.data.data;
			  })
			  .catch(function(err){
				console.log(err);
			  })
		}

	}

</script>

<style>
	img{
		display: block;
	}
	#activity_box{
		background: #f8f8f8;
		display: flex;
	}
	.activity_header{
		background: #fff;
		height: .9rem;
		width: 100%;
		position: fixed;
		top: 0;
	}
	.activity_header_nav li{
		float: left;
		line-height: .9rem;
		font-size: .33rem;
		padding-left: .18rem;
	}
	#header_button{
		float: right;
		margin: .3rem .3rem 0 0;
	}
	.activity_header_nav li a{
		color: black;
	}
	#activity_main{
		margin-top: 1rem;
		margin-bottom: .9rem;
	}
	.activity_project{
		margin-top: .1rem;
	}
	.activity_project_title{
		height: .8rem;
		line-height: .8rem;
		padding: 0 .2rem;
		background: #fff;
	}
	.activity_project_banner_img{
		width: 6.4rem;
	}
	.activity_project_time{
		float: right;
		font-size: .3rem;
	}
	#activity_loadmore{
		margin: .3rem auto;
		border-radius: .5rem;
		width: 90%;
		height: .7rem;
		line-height: .7rem;
		text-align: center;
		font-size: .3rem;
		color: #666666;
		background: #dddddd;

	}
	.huodong_loadmore{
		width: 90%;
		height: .7rem;
		line-height: .6rem;
		font-size: .3rem;
		color: #555555;
		background: #e3e3e3;
		border-radius: 2rem;
		margin: .3rem 0 0 .3rem;
		text-align: center;
	}
</style>
